サイトのナビゲーションシステムについて整理する【CCG管理者向け】
このブログについて
本ブログは ナレッジサイトである Classmethod Cloud Guidebook(CCG) 1 の運営・改善チーム向けに連携したナレッジです。 情報アーキテクチャを考えるに当たって、一般に参考になる部分もあるため、ブログにて公開しています。
CCGのサイト構成をより良くするための情報アーキテクチャを考えます。 特に今回は情報アーキテクチャの1要素である ナビゲーションシステム について取り上げます。
なお、本ブログは以下の O'Reilly 情報アーキテクチャ書籍を大いに参考にしています。
前提
そもそも情報アーキテクチャとは？
情報アーキテクチャは 情報を見つけやすく、分かりやすいものにするための考え方 のことを言います。
特に、大量にある情報をもつサイト(システム)において、重要になってきます。
ナビゲーションシステムとは？
情報アーキテクチャの1要素であり、 現在地の把握 や 情報の探索 を可能にするシステムです。 ユーザーがサイト内で迷わないために、様々な工夫ができる重要な要素です。
詳細は後述しますが、例えば DevelopersIO においても 以下のような工夫(ナビゲーションシステム)が施されています。
埋め込み型ナビゲーションシステム
サイトに埋め込む形のナビゲーションとして、 大きく以下 3つの分類があります。
| 役割 | |
|---|---|
| グローバルナビゲーション | どこにいるのか？ |
| ローカルナビゲーション | 近くに何があるのか？ |
| コンテキストナビゲーション | ここにあるものと関連するものは何か？ |
以降でそれぞれのナビゲーションを説明します。
✅ グローバルナビゲーション
サイトの全ページで表示される ナビゲーションです。 どこにいるのか をユーザーに伝えます。
例えば Classmethodの企業サイトの グローバルナビゲーションは以下の部分になります。
[classmethod] のロゴが左上にあり、 「いま居るところが Classmethod のサイトである」ことがはっきりと分かります。
また、 [特徴] や [得意分野] などのリンクは サイトの構造(提供している情報)を表しています。 グローバルナビゲーションのリンクから、 ユーザーは欲しい情報を探索することができます。
一方で、2023-08 時点の CCG のグローバルナビゲーションを見てみます。
まずは以下CCGのアイコン部分です。 CCGアイコンをクリックするとトップページへ遷移できます。
もう一つ、左部にあるコンテンツ階層もグローバルナビゲーションと言えるでしょう。 CCGが提供するコンテンツ全体、階層構造を俯瞰できます。
✅ ローカルナビゲーション
近くに何があるのか を把握し、その領域を探索できるように するためのナビゲーションです。
例えば、AWSのマネジメントコンソールは AWSのサービス単位でローカルナビゲーションが提供されています。
「そのAWSサービスの構成要素や機能」を把握し、探索することができます。
一方で、2023-08 時点の CCG のローカルナビゲーションについて考えてみます。 現状は右部にある [目次] が該当します。
目次に記載されている見出しタイトルをクリックすることで、 その見出しまでジャンプできます。
✅ コンテキストナビゲーション
関連するもの を探索できるようにするためのナビゲーションです。
「参照(See Also)」として、関連する製品やサービスへ案内することが多いです。 冒頭で紹介した DevelopersIO ブログの 「関連記事」が、まさにコンテキストナビゲーションです。
ハイパーリンクとして、関連記事を埋め込むのも コンテキストナビゲーションです。 例えばCCGの以下部分です。
補足型ナビゲーションシステム
サイトの階層外にあり、 コンテンツの発見を補足するナビゲーションです。
いくつか補足型ナビゲーションシステムを紹介します。
✅ サイトマップ
サイトマップは「そのサイトにある 全コンテンツを一望 する」ためにあります。
以下は Classmethodのサイトマップ です。
コンテンツの階層構造を視覚化して、 ユーザーがコンテンツ全容を理解できるように工夫されています。
✅ サイトインデックス
キーワードや語句を 辞書順に表示 したものです。 探したいものが明確であるときに役に立ちます。
例えば AWS CLI リファレンス 冒頭には コマンド一覧が辞書順に並んでいます。
✅ 検索
ユーザーが キーワードを入力して、コンテンツを探せる ようにするためのシステムです。
2023-08 時点の CCGではサイト内コンテンツの検索が可能です。
ほか(パンくずリスト)
パンくずリストは今後の改善で役立ちそうなので紹介します。
パンくずリストは、 サイトの現在地(階層)を表示 するナビゲーションです。
例えば Classmethodの 製造業ページ における パンくずリストは以下部分です。
見ているサイトが「どこにあるコンテンツか」を把握できます。 また、「>」 で区切られた各要素はハイパーリンクになっているので、 ここから上位の階層へ移動することもできます。
まとめ(伝えたいこと)
色々とナビゲーションについて列挙しました。 まとめます。
ナレッジサイトである Classmethod Cloud Guidebook は今後も情報量が増え続けます。 そのために ユーザーがサイト内で迷わないための工夫 を考慮し続ける必要があります。
その工夫を考える際に、情報アーキテクチャは役に立ちます。 そして、本ブログでは ナビゲーションシステム について考えました。
ナビゲーションシステムにおいてはユーザー目線で、以下を考えます。
- どこにいるのか？ (グローバルナビゲーション)
- 近くに何があるのか？ (ローカルナビゲーション)
- ここにあるものと関連するものは何か？ (コンテキストナビゲーション)
また、補足的にサイトマップや検索などを活用して、 ユーザーの「情報へのアクセス」を補助できます。
直近、2023-08 時点の CCG にはサイトマップやパンくずリストが無いので、それらの導入を考えても良いかもしれません。
